<!-- 博客推荐页 -->

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 帖子列表数据
const posts = ref([
  {
    id: 1,
    title: '分享一下最近玩的一款游戏',
    content: '最近玩了一款很有意思的游戏，画面和剧情都很惊艳...',
    author: {
      name: '游戏玩家A',
      avatar: 'https://picsum.photos/40/40?random=1'
    },
    publishTime: '2小时前',
    views: '1.2万',
    likes: 328,
    comments: 89,
    tags: ['游戏', '分享'],
    images: ['https://picsum.photos/300/200?random=1']
  }
])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(8)
const total = ref(100) // 总条数，实际应该从后端获取
const loading = ref(false)

// 跳转到帖子详情
const goToPost = (id: number) => {
  router.push(`/blogArticle/${id}`)
}

// 点赞帖子
const likePost = (post: any) => {
  post.likes++
}

// 处理分页变化
const handlePageChange = async (page: number) => {
  loading.value = true
  try {
    // 模拟加载数据
    await new Promise((resolve) => setTimeout(resolve, 1000))

    // 这里应该是实际的API调用
    const newData = Array(pageSize.value)
      .fill(null)
      .map((_, index) => ({
        id: (page - 1) * pageSize.value + index + 1,
        title: `帖子标题 ${(page - 1) * pageSize.value + index + 1}`,
        content: '帖子内容...',
        author: {
          name: `用户 ${(page - 1) * pageSize.value + index + 1}`,
          avatar: `https://picsum.photos/40/40?random=${
            (page - 1) * pageSize.value + index + 1
          }`
        },
        publishTime: '刚刚',
        views: Math.floor(Math.random() * 10000) + '次',
        likes: Math.floor(Math.random() * 200),
        comments: Math.floor(Math.random() * 100),
        tags: ['标签'],
        images: [
          `https://picsum.photos/300/200?random=${
            (page - 1) * pageSize.value + index + 1
          }`
        ]
      }))

    posts.value = newData
    currentPage.value = page
  } finally {
    loading.value = false
  }
}

// 初始加载
onMounted(() => {
  handlePageChange(1)
})
</script>

<template>
  <div class="space-y-4">
    <!-- 帖子列表 -->
    <div v-loading="loading">
      <el-card
        v-for="post in posts"
        :key="post.id"
        class="mb-4 hover:shadow-lg transition-all"
      >
        <!-- 帖子头部 -->
        <div class="flex items-center gap-3 mb-3">
          <el-avatar
            :size="40"
            :src="post.author.avatar"
          />
          <div>
            <div class="font-bold">{{ post.author.name }}</div>
            <div class="text-gray-500 text-sm">{{ post.publishTime }}</div>
          </div>
        </div>

        <!-- 帖子内容 -->
        <div
          class="cursor-pointer"
          @click="goToPost(post.id)"
        >
          <h3 class="text-xl font-bold mb-2 hover:text-blue-500">
            {{ post.title }}
          </h3>
          <p class="text-gray-600 text-sm mb-3">{{ post.content }}</p>

          <!-- 图片 -->
          <div class="grid grid-cols-2 gap-2 mb-3">
            <el-image
              v-for="(image, index) in post.images"
              :key="index"
              :src="image"
              fit="cover"
              class="w-full h-[150px] rounded"
            />
          </div>
        </div>

        <!-- 帖子底部 -->
        <div class="flex items-center justify-between text-sm text-gray-500">
          <div class="flex items-center gap-4">
            <span class="flex items-center gap-1">
              <el-icon><View /></el-icon>
              {{ post.views }}
            </span>
            <button
              class="flex items-center gap-1 hover:text-red-500"
              @click="likePost(post)"
            >
              <el-icon><Star /></el-icon>
              {{ post.likes }}
            </button>
            <span class="flex items-center gap-1">
              <el-icon><ChatDotRound /></el-icon>
              {{ post.comments }}
            </span>
          </div>
          <div class="flex gap-2">
            <el-tag
              v-for="tag in post.tags"
              :key="tag"
              size="small"
              effect="plain"
            >
              {{ tag }}
            </el-tag>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 分页器 -->
    <div class="flex justify-center py-8">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        :page-sizes="[8, 16, 24, 32]"
        layout="total, sizes, prev, pager, next, jumper"
        background
        @size-change="handlePageChange(1)"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<style lang="less" scoped>
.el-card {
  &:hover {
    transform: translateY(-2px);
  }
}
</style>
